<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <el-button
                    type="primary"
                    class="handle-del mr10"
                    @click="addAuthBtn"
                >添加权限</el-button>
            </div>
            <div class="table-content">
				<el-table :data="authList" border style="width: 100%" row-key="id" v-loading="loading" >
					<el-table-column prop="id" width="120" label="ID"></el-table-column>
					<el-table-column prop="title" label="权限名称"></el-table-column>
					<el-table-column prop="router" label="vue:router"></el-table-column>
					<el-table-column prop="name" label="http:router"></el-table-column>
					<el-table-column prop="is_menu" label="菜单"></el-table-column>
					<el-table-column width="120" label="操作">
						<template slot-scope="scope">
							<el-button
							    type="text"
							    icon="el-icon-delete"
							    class="red"
							    @click="delAuthRule(scope.row)"
							>删除</el-button>
							<!-- <span class="edit-btn">编辑</span> -->
						</template>
					</el-table-column>
				</el-table>
			</div>
        </div>
        <!-- 添加弹出框 -->
        <el-dialog title="新增权限" :visible.sync="showAddAuth">
             <el-form :model="form" ref="forms" label-position="left" label-width="100px">
				<el-form-item label="是否菜单">
					<el-switch
							props="is_menu"
							v-model="form.is_menu"
							active-color="#02C7AC"
							inactive-color="#999">
					</el-switch>
				</el-form-item>
				<el-form-item label="父级权限">
					<el-cascader
							v-model="form.p_id"
							:options="authList"
							:props="authProps"
							change-on-select
					></el-cascader>
				</el-form-item>
				<el-form-item v-if="form.is_menu" label="菜单选择">
					<el-cascader
							ref="menuSelect"
							@change="menuSelectChange"
							v-model="form.router"
							:options="menuRouterList" 
							:props="menuProps"
							change-on-select
					></el-cascader>
				</el-form-item>
				<el-form-item label="权限名称">
					<div style="width: 220px;display: inline-block">
						<el-input placeholder="请输入权限名称" props="title" :disabled="form.is_menu" v-model="form.title"></el-input>
					</div>
				</el-form-item>
				<el-form-item label="http:路由" v-if="!form.is_menu">
					<div style="width: 220px;display: inline-block">
						<el-input placeholder="http:路由" props="title" v-model="form.name"></el-input>
					</div>
				</el-form-item>
				<el-form-item>
					<div class="btn-contnet">
						<el-button type="primary" :loading="creating" @click="createAuth">立即创建</el-button>
						<el-button @click="showAddAuth=false">取消</el-button>
					</div>
				</el-form-item>
			</el-form>
        </el-dialog>
    </div>
</template>

<script>
import {getNodeList,nodeRuleAdd,nodeRuleDel} from '../../api/auth.js'
import {menuRouterFunc} from '../../conf/menu.js'
export default {
	data() {
		return {
			loading:false,
			creating:false,
			//菜单节点列表
			authList: [],
			//父级权限多级选择映射
			authProps: {
				value: 'id',
				label: 'title',
				children: 'children'
			},
			//菜单多级选择映射
			menuProps: {
				value: 'path',
				label: 'title',
				children: 'subs'
			},
			//所有菜单路由集合
			menuRouterList: [],
			showAddAuth: false,
			form: {
				p_id: [],
				router: [],
				is_menu: true,
				title: '',
				name: ''
			}
		}
	},
	created() {
		this.menuRouterList = menuRouterFunc()
		this.getAuthList();
	},
	computed: {
		style() {
			return ''
		}
	},
	methods: {
		/**
		 * 获取权限列表
		 * @return {Promise<void>}
		 */
		async getAuthList() {
			this.loading = true;
			let [e, data] = await getNodeList()
			this.loading = false;
			if (e) throw e;
			this.authList = data.data;
		},
		//添加权限btn
		addAuthBtn() {
			this.showAddAuth = !this.showAddAuth
		},
		//菜单选择事件
		menuSelectChange(e) {
			setTimeout(() => {
				this.form.title = this.$refs.menuSelect.$children[0].value
			}, 5)
		},
		/**
		 * 创建权限
		 * @return {Promise<void>}
		 */
		async createAuth() {
			//菜单则必须选择菜单路由
			if (this.form.is_menu && this.form.router.length <= 0) {
				return this.$message.error('请选择菜单')
			} 
			let form = {};
			
			form.is_menu = this.form.is_menu ? 1 : 2
			form.p_id = this.form.p_id[this.form.p_id.length - 1] || 0
			form.router = this.form.router[this.form.router.length - 1]
			form.title = this.form.title
			form.name = this.form.name
			this.creating = true;
			let [e, data] = await nodeRuleAdd(form)
			this.creating = false;
			if(e){return}
			this.$refs.forms.resetFields();
			this.showAddAuth = false;
			this.$message.success('创建成功');
			this.getAuthList();
		},
		
		/**
		 * 删除权限
		 * @param row
		 * @return {Promise<void>}
		 */
		async delAuthRule(row) {
			try {
				await this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				});
				let [e, data] = await nodeRuleDel({id: row.id})
				if (e) {return;}
				this.getAuthList();
				this.$message.success('删除成功')
			} catch (e) {
			}
		}
	},
	watch:{
		'form.is_menu'(){
			this.form.name = ''
		}
	}
}
</script>

<style scoped>

</style>
